<template>
  <Layout>
    <div class="support">
      <SupportBanner :bannerImg="bannerImg" :title="title"/>
      <a-tabs
        class="tab"
        default-active-key="1"
        change="onChange"
      >
        <a-tab-pane key="1" tab="FAQ">
          <div class="content">
            <Faq />
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" tab="Maintenance">
          <div class="content">
            <Maintenance />
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="Training">
          <div class="content">
            <Train />
          </div>
        </a-tab-pane>
        <a-tab-pane key="4" tab="Download">
          <div class="content">
            <Download />
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </Layout>
</template>

<script>
import Layout from '/@/components/layout/Layout.vue'
import SupportBanner from '/@/components/SupportBanner.vue'
import Faq from "../components/support/Faq.vue";
import Train from "../components/support/Train.vue";
import Maintenance from "../components/support/Maintenance.vue";
import Download from "../components/support/Download.vue";
import supportImg from "../assets/images/support/4.1 support.jpg"
export default {
  name: 'Support',
  components:{Layout,SupportBanner, Faq, Train, Maintenance, Download},
  setup(){
    const bannerImg = supportImg
    const title = "Support"
    const onChange= (activeKey) => {
      // console.log(50, activeKey)
    }
    return {
      bannerImg,
      title,
      onChange
    }
  }
}
</script>

<style lang="scss" scoped>
.support {
  background:#d3d3d3;
  ::v-deep .ant-tabs-nav-wrap{
    text-align: center;
    background-color:#1d1d1b;
    .ant-tabs-nav{
      .ant-tabs-tab{
        color:white;
      }
    }
  }
  .content{
    margin:0 auto;
    width:70vw;
  }
}
</style>
